import './App.css'
import {useState} from 'react'
import LegendaryCraft from './components/LegendaryCraft'
import FAQ from './components/FAQ';
import Mole from './components/Mole';

function App() {

  const [activeTab, setActiveTab] = useState('craft');
  
  return (
    <>
      <div className='title'>
        <h1>Legendary Seventy-Six!</h1>
      </div>
      <div className="tabs">
        <button className={`button-tab ${activeTab === "mole" ? "button-tab-active" : ""}`}  onClick={() => setActiveTab('mole')}>Purveyor Murmrgh</button>
        <button className={`button-tab ${activeTab === "craft" ? "button-tab-active" : ""}`} onClick={() => setActiveTab('craft')} >Legendary Craft</button>
        <button className={`button-tab ${activeTab === "faq" ? "button-tab-active" : ""}`} onClick={() => setActiveTab('faq')} >FAQ</button>
      </div>
      <div className='mainContent'>
        <div className='tabBody' style={{display: activeTab === 'mole' ? 'flex' : 'none'}}><Mole/></div>
        <div className='tabBody' style={{display: activeTab === 'craft' ? 'flex' : 'none'}}><LegendaryCraft/></div>
        <div className='tabBody' style={{display: activeTab === 'faq' ? 'flex' : 'none'}}><FAQ/></div>
      </div>
      <div className='footer'>
        Ver: 0.0.3. All Rights Reserved. Thanks <a href='https://fallout.fandom.com/'>Fallout Wiki</a> for providing equipments and effects data.
      </div>
    </>
  )
}

export default App
